<template>
    <div class="mr-content">
        <pheade>
            <span class="s"> {{$route.params.name}}</span>
        </pheade>
        <header>
            <div class="content">
                <div class="img">
                    <img :src=ju.images alt="">
                </div>
                <div class="content2">
                    <p>{{ju.name}}</p>
                    <p>{{ju.author}}</p>
                    <p>标签:{{ju.categoryLabel}}</p>
                    <p>{{ju.updateInfo}}</p>
                    <router-link :to="'/comic/Contentdetails/'+ju.id+'/'+ju.name">
                        <div>开始阅读</div>
                    </router-link>
                </div>
            </div>
            <div class="neirong">
                {{ju.introduction}}
            </div>
            <p class="gengxin">{{ju.updateInfo}}</p>
        </header>
        <div class="mulu" v-for="li in mulu">
            <router-link :to="'/comic/Mulu/'+li.cartoonId+'/'+li.priority">
          <div class="span">
              <ul>
                  <li>
                      {{li.priority}}
                  </li>
              </ul>
          </div>
         </router-link>
        </div>
  
        <div class="about">
            <h2>相关推荐</h2>

        </div>
        <ul class="item" v-for="c in ti">
            <li>
                <router-link :to="'/comic/Contentdetails/'+c.id+'/'+c.name">
                    <div class="imgs">
                        <img :src=c.images alt="">
                    </div>
                    <div class="geng">
                        <span>{{c.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{c.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{c.author}}</span>
                    </div>
                </router-link>
            </li>
        </ul>
        <loding v-if="showload"></loding>
        <div class="kong"></div>
        <pfooter></pfooter>
    </div>

</template>
<script>
    import Pheade from '../components/Head'
    import Loding from '../components/Loding'
    import Pfooter from '../components/Footer'
    export default {
        components: {
            Pheade, Loding, Pfooter
        },
        data() {
            return {
                showload: true,
                ju: {},
                ti: [],
                mulu: []
            }
        },
        created() {
            this.axios.get(`https://api.maimengjun.com/index.php?r=v3/cartoonSet/detail&
            id=${this.$route.params.id}`)
                .then(data => {
                    this.ju = data.data.results
                    console.log(this.ju)
                    setTimeout(() => {
                        this.showload = false
                    }, 1000)
                    this.mulu = this.ju.cartoonChapterList
                })
                .catch(err => {

                })
            this.axios.get(`https://api.maimengjun.com/index.php?r=v3/cartoonSet/relativeList&
            id=${this.$route.params.id}&page=1`)
                .then(data => {
                    this.ti = data.data.results

                })
        }
    }

</script>
<style scoped>
.gengxin{
    line-height: 0.7rem;
    width:3rem;
    text-align: center;
    background: #ff4f65;
    font-size: 0.4rem;
    color: gray;
    margin-left: 0.6rem;
    border-radius: 10px 0 10px 0;
    color: white;
    position: relative;
    top:0.3rem;
}
.mulu{
    margin-top:8.2rem;
}
.span>ul{
    margin-left: 0.5rem;
}
   .span>ul>li{
    float: left;
    width: 2rem;
    line-height: 0.9rem;
    font-size: 0.4rem;
    text-align: center;
    background: hsla(0,0%,100%,.9);
    border: .01rem solid #e6e6e6;
    border-radius: .02rem;
    color: #999;
    margin: .03rem .06rem;
   }
    .kong {
        height: 2rem;
        width: 100%;
        position: relative;
        top: 23rem;
    }
    
    .geng>span {
        font-size: 13px;
        margin-left: 20px;
        display: inline-block;
        width: 110px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        background: rgba(0, 0, 0, .5);
        color: white;
        position: relative;
        top: -0.9rem;
    }
    
    .imgs img {
        width: 110px;
        height: 160px;
        margin-left: 20px;
    }
    
    .name {
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 22px;
        font-weight: bolder;
        position: relative;
        top: -0.7rem;
    }
    
    .ming {
        font-size: 15px;
        color: #ccc;
        margin-left: 25px;
        width: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        top: -0.7rem;
    }
    
    .item {
        width: 400px;
        margin-top: 0.5rem;
    }
    
    .item>li {
        float: left;
    }
    
    .about>h2 {
        margin-top: 22rem;
        margin-left: 0.6rem;
    }
    
    .neirong {
        width: 9.5rem;
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        font-size: 0.4rem;
        color: #ccc;
    }
    
    .s {
        display: inline-block;
        position: relative;
        left: 3rem;
        top: 0.2rem;
        font-size: 0.4rem;
        color: #ff4f65;
        font-weight: bolder;
    }
    
    header {
        width: 100%;
        height: 4rem;
        background-image: url(../assets/img/6.png);
        margin-top: 1rem;
    }
    
    .img>img {
        height: 4.5rem;
        width: 3.5rem;
        margin-top: 1rem;
        margin-left: 0.5rem;
    }
    
    .content {
        width: 100%;
    }
    
    .content>div {
        display: inline-block;
    }
    
    .content2 {
        position: absolute;
        top: 2rem;
        right: 1rem;
        color: white;
    }
    
    .content2 div {
        margin-top: 0.9rem;
        line-height: 1rem;
        text-align: center;
        font-size: 0.4rem;
        width: 3rem;
        background: #ff4f65;
        color: white;
    }
    
    .content2>p {
        margin-bottom: 0.2rem;
        font-size: 0.3rem;
    }
    
    .content2>p:nth-child(1) {
        font-size: 0.5rem;
        font-weight: bolder;
    }
</style>